<template>
    <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :total="total"
        :layout="layout">
    </el-pagination>
</template>

<script>
import lang from 'element-plus/es/locale/lang/zh-cn'
export default {
    name: 'pagination',
    props: {
        currentPage: {
            type: Number,
            default: 1
        },
        pageSizes: {
            type: Array,
            default: () => {
                return [10, 20, 50]
            }
        },
        pageSize: {
            type: Number,
            default: 20
        },
        total: {
            type: Number,
            default: 0
        },
        layout: {
            type: String,
            default: 'total, sizes, prev, pager, next, jumper'
        }
    },
    emits: ['size-change', 'current-change'],
    setup (props, context) {

        function handleSizeChange(pageSize) {
            context.emit('size-change', pageSize)
        }

        function handleCurrentChange(currentPage) {
            context.emit('current-change', currentPage)
        }

        return {
            handleSizeChange,
            handleCurrentChange,
            props,
            lang
        }
    }
}
</script>

<style lang="scss">
    .el-pagination {
        padding-top: 20px;
        padding-right: 0px;
        text-align: right;
        font-weight: normal;
    }

    .btn-prev, .btn-next {
        .el-icon {
            margin: 0 auto;
        }
    }
</style>